先安裝

 npm install react-router-dom -s

React 路由有2種 一種是這章要說的Router還有一種就是用NEXT

Router:https://reactrouter.com/

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter , Switch ,Route} from 'react-router-dom';

const Test1 = () => {
  return(
    <div>首頁</div>
  );
}

const Test2 = () => {
  return(
    <div>這是一個測試頁面</div>
  );
}

const Not404 = () => {
  return(
    <div>這是無效頁面</div>
  );
}

const Routers = () => (
  <BrowserRouter>
  <Switch>
  <Route path="/" exact component={Test1}/>
  <Route path="/test" component={Test2}/>
  <Route component={Not404}/>
  </Switch>  
  </BrowserRouter>
)
ReactDOM.render(<Routers />, document.getElementById('root'));

直接用index.js 來寫，每個const都是一個頁面

path<--自訂網址
component<--自訂頁面
ecact<--用來指定首頁(嚴格指定

不指定path的話就會變成無效頁面

輸出畫面

另外要注意

const Routers = () => (
....
)

這邊箭頭函數後面是小括號"()" 不能用大括號"{}"

如果要用大括號必須在加上return

const Routers = () => {
  return(
    <BrowserRouter>
    <Switch>
    <Route path="/" exact component={Test1}/>
    <Route path="/test" component={Test2}/>
    <Route component={Not404}/>
    </Switch>  
    </BrowserRouter>
  );
}